<template>
  <component is="dv-border-box-10" :color="dataVThem.color" :backgroundColor="dataVThem.bgColor" class="rootYouFenLei">
    <div class="mainYouFenLei">
      <div class='nav' v-for="(item,index) in navConfig" @click="()=>pageUrl(item)" :key="index">
        <a class="common hiddenOverflow" href="javascript:void">{{ item.showTxt }}</a>
      </div>
    </div>
  </component>
</template>
<script>
import {functionClick, getAd} from "../../../api/http";

export default {
  props:{},
  data(){
    return {
      navConfig:[]
    }
  },
  created () {
    this.loadYouNavConfig()
  },
  methods:{
    loadYouNavConfig() {
      let pageConfig = window.pageConfig
      if (!window.pageConfig || !Array.isArray(pageConfig.YouDaoHang)) {
        throw new Error('右导航栏【三方推广】未配置')
      }
      let navConfig = pageConfig.YouDaoHang.map(e => {
        let res = Object.assign({}, e)
        return res
      })

      console.info('右导航栏【三方推广】配置 ', navConfig)
      this.navConfig = navConfig
    },

    async pageUrl(navConfig) {

      if (navConfig.inner) {
        functionClick();
        this.$router.push(navConfig.url)
          .then(e => {
            //todo
          })
          .catch(e => {
            console.debug('顶部导航配置错误', navConfig, e)
            if (/^(http)/ig.test(navConfig.url))
              window.open(navConfig.url, '_blank')
          })
      } else if (/^(http)/ig.test(navConfig.url)) {
        functionClick();
        window.open(navConfig.url, '_blank')
      } else {
        if( navConfig.showTxt == 'AI广告流'){
          await this.$router.push({
            path: "/video",
          })
          return
        }else
        if (navConfig.showTxt == '任务大厅' ) {
          await this.$router.push({
            path: "/TaskPage",
          })
          return false;
        }else if (navConfig.showTxt=='AI去水印'){
          await this.$router.push({
            path: "/RemoveWatermark",
          })
          return false
        }
        else if (navConfig.showTxt=='智能AI文案'){
          await this.$router.push({
            path: "/gpt",
          })
          return false
        }
        else if (navConfig.showTxt=='营销素材'){
          await this.$router.push({
            path: "/SourcePage",
          })
          return false
        }
        alert('开发中。。');
        // console.debug('顶部导航配置错误,无法正确打开', navConfig)
      }
    }
  }
}
</script>
<style scoped lang="less">
@import url('~@/assets/style/var.less');
@import url('~@/assets/style/common.less');

.rootYouFenLei{
  // width: 100%;
  height: 490px;
  .mainYouFenLei{
    height: 100%;
    background-color: unset;
    padding: 1.5rem;
    overflow-y: auto;
    .nav {
      // width: calc(~'100% - 1rem');
      font-weight: 400;
      font-size: 14px;
      line-height: 40px;
      height: 40px;
      text-align: center;
      color: @txt-color;
      margin-bottom: 0.5rem;
      padding: 0 .5rem;
      box-sizing: border-box;
      border: 1px solid #fff;
      border-color: @border-color;
      &:nth-last-child(1){
        margin-bottom: 0;
      }
    }
  }
}

</style>
